<!-- 作废记录 -->
<template>
  <div class='cancel_record'>
    <dt-search ref="search" :labelWidth="100" @reset="resetFun">
      <Button type="primary" @click="exportTable(0)" v-if="unlocking('0106030100')"
        style="margin-right:8px;">导出</Button>
      <Button type="primary" @click="exportTable(1)"
        v-if="unlocking('0106030200')">全号导出</Button>
      <Button type="primary" style="margin-left:10px;"> <a
          href="https://images.tospurfang.com/doc/%E5%9B%9E%E6%AC%BE%E4%BD%9C%E5%BA%9F%E6%93%8D%E4%BD%9C%E8%AF%B4%E6%98%8E.pdf"
          style="color:#fff;" target="_blank">查看操作指引</a>
      </Button>
    </dt-search>
    <dt-grid ref="table" :page="page" :onFetch='onFetch' />
    <!-- 客户详情 -->
    <Modal v-model="detailsFlag" title="客户详情" width="80%" :styles="{top:'5%'}"
      :footer-hide="true">
      <detail-page v-if="detailsFlag" :detailsParams="detailsParams"></detail-page>
    </Modal>
  </div>
</template>
<script>
  import detailPage from '@/views/casemanagement/allCustomersManagement/details.vue'
  import searchOpt from './opt/cancelsearch'
  import column from './column/cancelColumns'
  import cancelApi from '@/biz/paymenManage/cancelRecord'
  import dt from '@dt/dt'
  export default {
    components: {
      detailPage,
    },
    data() {
      return {
        filterParams: {},
        searchInfo: {
          receiptNumber: '',
          contractCode: '',
          productId: '',
          buildingId: '',
          unitId: '',
          roomCode: '',
          housesId: this.$dt.buildInfo().housesId,
        },
        page: {
          current: 1,
        },
        detailsFlag: false,
        detailsParams: {},
      }
    },
    methods: {
      resetFun() {
        this.$refs.search.init(this.$refs.table, searchOpt.options(this), this
          .searchInfo)
      },
      onFetch(data) {
        this.filterParams = {
          ...data
        }
        return cancelApi.listInfo(data).then((res) => {
          if (res) {
            return res
          }
        }).catch(err => {})
      },
      //导出
      exportTable(exportType) {
        let params = { ...this.filterParams }
        params.exportType = exportType
        cancelApi.exportPayBackVoid(params)
      },
      // 保留列表查询参数
      retainParamsFun() {
        let params = Object.assign({
          filter: this.$refs.table.throwFilter().export()
        }, this.filterParams)
        dt.memory.set('cancelRecord_params', params)
      },
      // 客户姓名链接到客户资料
      onLinkUser(row) {
        if (row.customerName == '-') {
          return false
        }
        this.detailsFlag = true
        this.detailsParams = {
          customerId: row.customerId,
          userCustomerId: row.userCustomerId,
          buildingId: this.$dt.buildInfo().housesId,
          userId: row.userId,
          cityCode: this.$dt.buildInfo().cityId,
        }
      },
      //查看
      viewFun(row) {
        if (!this.unlocking('0104030300')) {
          return false
        } else {
          this.retainParamsFun()
          this.$router.push({
            name: 'contractDetail',
            query: {
              examineBtn: false,
              showTab: 'payment',
              orderStatusName: '签约',
              orderNum: row.contractCode, // 单号
              businessId: row.contractId, // 业务id
              subscriptionId: row.subscriptionId, //认购ID
            },
          })
        }
      },
    },
    beforeRouteEnter(to, from, next) {
      if (from.name != 'contractDetail') dt.memory.remove('cancelRecord_params')
      next()
    },
    created() {},
    mounted() {
      let _this = this
      let retainParams = dt.memory.get('cancelRecord_params')
      this.$refs.table.init(this, new column(this), { ...retainParams })
      this.$refs.search.init(this.$refs.table, searchOpt.options(this), this
        .searchInfo)
      this.$refs.table.fetch()
      if (retainParams) {
        Object.keys(this.searchInfo).map(function(key) {
          retainParams[key] && (_this.searchInfo[key] = retainParams[key]) //比较key
        })
        retainParams.rows && (this.page.rows = retainParams.rows)
        retainParams.page && (this.page.current = retainParams.page)
      }
      this.$nextTick(function() {
        if (retainParams)
          retainParams.filter && _this.$refs.table.throwFilter().import(retainParams
            .filter)
      })
    },
  }
</script>
<style lang='scss' scoped>
  .cancel_record {
    padding: 20px;

    .plan_total_num {
      padding-left: 17px;
      font-size: 16px;
    }

    .payment_arrival_btn {
      width: 100px;
      margin-right: 20px;
    }

    .export_btn {
      margin-left: 120px;
    }

    .tab {
      margin-top: 15px;
    }
  }
</style>